import echarts from 'echarts'

export function barChartOptions(data) {

    let xAxisData = [],
        data1 = [],
        data2 = [],
        data3 = []

    data.map(it => {
        xAxisData.push(it.date)
        data1.push(it.received)
        data2.push(it.receiving)
        data3.push(it.total)
    })

    return {
        tooltip: {
            trigger: 'item',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: 0,
            right: 0,
            bottom: 0,
            top: 30,
            containLabel: true
        },
        legend: {
            data: ['已收', '未收', '总应收'],
            left: '7%',
            top: 0,
            textStyle: {
                color: "#666666"
            },
            itemWidth: 15,
            itemHeight: 10,
            itemGap: 25
        },
        xAxis: {
            type: 'category',
            data: xAxisData,
            axisLine: {
                lineStyle: {
                    color: '#cdd5e2'

                }
            },
            axisLabel: {
                interval: 0,
                rotate: 20,
                textStyle: {
                    color: "#666666"
                }
            },
        },

        yAxis: [{
            type: 'value',
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#cdd5e2'
                }
            },
            splitLine: {
                show: false,
            },
            axisLabel: {
                textStyle: {
                    color: "#666666"
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#cdd5e2'
                }
            },
        },
        ],
        series: [{
            name: '已收',
            type: 'bar',
            barWidth: '10px',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#29acff'
                    }, {
                        offset: 1,
                        color: '#4bdfff'
                    }]),
                    barBorderRadius: 6,
                },
            },
            data: data1
        },
        {
            name: '未收',
            type: 'bar',
            barWidth: '10px',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#3d93f2'
                    }, {
                        offset: 1,
                        color: '#5dc1fd'
                    }]),
                    barBorderRadius: 6,
                }

            },
            data: data2
        },
        {
            name: '总应收',
            type: 'bar',
            barWidth: '10px',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#01c871'
                    }, {
                        offset: 1,
                        color: '#55f49c'
                    }]),
                    barBorderRadius: 6,
                }
            },
            data: data3
        }
        ]
    };
}

export function pieChartOptions(data) {

    let myData = data.reduce(function(res, item) {
        if(item.name !== "应付款" && item.name !== "应收款") {
            res.push({...item, value: item.amount})
        }
        return res
    },[])
    

    return {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: '数据',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '40',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: myData
            }
        ]
    };
}